<!--登录模态框组件-->
<template>
    <div>

        <a-modal v-model="visible" on-ok="handleOk" footer width="350px" height="280px" @cancel="dianji">

            <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane key="1" tab="普通登录">
                    <!--    登录表单开始位置-->
                    <a-form
                            id="components-form-demo-normal-login"
                            :form="form"
                            class="login-form"
                            @submit="handleSubmit"
                    >
                        <a-form-item>
                            <a-input
                                    v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
                                    placeholder="请输入账号"
                            >
                                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input
                                    v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                                    type="password"
                                    placeholder="请输入密码"
                            >
                                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                            </a-input>
                        </a-form-item>
                        <a-form-item>

                            <a-button type="primary" html-type="submit" class="login-form-button" style="width: 100%">
                                登录
                            </a-button>

                            <a href="#" @click="registered">
                                立即注册？
                            </a>
                            <a href="" style="float: right">
                                忘记密码？
                            </a>
                        </a-form-item>
                    </a-form>
                    <!--                    登录表单结束位置-->

                </a-tab-pane>
                <a-tab-pane key="2" tab="手机登录" force-render>
                    <a-form
                            id="components-form-demo-normal-login"
                            :form="form"
                            class="login-form"
                            @submit="handleSubmit"
                    >
                        <a-form-item>
                            <a-input
                                    v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
                                    placeholder="请输入账号"
                            >
                                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input style="width: 60%"
                                     v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                                     type="password"
                                     placeholder="请输入密码"
                            >
                                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                            </a-input>
                            <a-button type="primary" style="float: right;border-radius: 5px;margin-top: 3px"
                                      width="160px">
                                获取验证码
                            </a-button>
                        </a-form-item>
                        <a-form-item>

                            <a-button type="primary" html-type="submit" class="login-form-button" style="width: 100%"
                                      @submit="getNum($event)">
                                登录
                            </a-button>

                            <a href="#" @click="registered">
                                立即注册？
                            </a>
                            <a href="#" style="float: right">
                                忘记密码？
                            </a>
                        </a-form-item>
                    </a-form>
                </a-tab-pane>
            </a-tabs>
        </a-modal>
    </div>
</template>

<script>


    export default {
        name: "LogRegister.vue",
        beforeCreate() {
            this.form = this.$form.createForm(this, {name: 'normal_login'});
        },
        data() {
            return {
                loading: false,

            };
        },
        methods: {
            getNum(e) {
                console.log(e)

            },         // handleOk() {
            //     this.loading = true;
            //     setTimeout(() => {
            //         this.$store.commit("changeFT", false)
            //         this.loading = false;
            //     }, 3000);
            // },
            // handleCancel() {
            //     this.$store.commit("changeFT", false)
            //
            // },
            callback(key) {
                console.log(key);
            },
            //    表单开始位置
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                        this.$store.dispatch("isLogin", values)
                        // this.$store.commit("changeFT", this.$store.state.logAfter)

                    }
                });
            },
            //    表单结束位置
            dianji() {
                this.$store.commit("changeFT", false)
            },
            registered() {
                this.$store.commit("registerFT", true)
                this.$store.commit("changeFT", false)
            },




        },
        computed: {

            // visible() {
            //         return this.$store.state.showHide
            // },
            visible: {
                get() {
                    return this.$store.state.showHide
                },
                set() {
                }
            },


        }
    }
</script>

<style scoped lang="less">
    /deep/ .ant-tabs-nav-scroll {
        text-align: center;
    }
</style>